<template>
  <div :class="$style.box">
    <div :class="$style.headerMenuBox">
      <h1>
        <a
          :class="$style.menuLink"
          href="https://vue-json-schema-form.lljj.me/"
        >
          <img
            :class="$style.logo"
            src="https://vue-json-schema-form.lljj.me/logo.png"
            alt="Vue JSON Schema Form"
          />
        </a>
      </h1>
      <Menu :class="$style.menu" :version="version" v-bind="$attrs"></Menu>
    </div>
    <div :class="$style.btns">
      <el-select
        v-if="showVersion"
        :model-value="version"
        :value="version"
        placeholder="版本"
        size="small"
        style="margin-right: 6px; width: 84px"
        @change="handleVersionChange"
      >
        <el-option value="vue2" label="vue2"></el-option>
        <el-option value="vue3" label="vue3"></el-option>
      </el-select>
      <slot></slot>
    </div>
  </div>
</template>

<script>
import Menu from './Menu'

export default {
  name: 'EditorHeader',
  components: {
    Menu
  },
  props: {
    version: {
      default: 'vue2',
      type: String
    },
    showVersion: {
      default: false,
      type: Boolean
    }
  },
  methods: {
    handleVersionChange(val) {
      // eslint-disable-next-line no-unused-vars
      const { ui, ...query } = this.$route.query
      const genRoute = this.$router.resolve({ query })
      window.location.href = `${val === 'vue3' ? '/v3/' : '/'}${genRoute.href}`
    }
  }
}
</script>

<style module>
@import '../css/variable.css';
.btns {
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  position: relative;
  margin: 0 auto;
  padding: 0 2%;
  height: auto;
  background: var(--color-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);
  z-index: 3;
}
.headerMenuBox {
  display: flex;
  align-items: center;
  justify-content: center;
  h1 {
    text-shadow: 0 0 40px #409eff;
    font-size: 26px;
    text-transform: uppercase;
    z-index: 10;
    margin: 0;
  }
  .logo {
    display: block;
    height: 25px;
  }
}
.menu {
  margin-left: 40px;
}
</style>
